<template>
  <div>
    <el-dialog
      title="注册"
      :visible="isshow"
      width="70%"
      center
      :modal="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      @close="dialogClose"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" clearable />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" show-password clearable />
        </el-form-item>
        <el-form-item label="确认密码" prop="repassword">
          <el-input v-model="form.repassword" show-password clearable />
        </el-form-item>
        <el-form-item label="用户类型" prop="resource">
          <el-radio-group v-model="form.resource">
            <el-radio label="0">顾客</el-radio>
            <el-radio label="1">员工</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { post } from '@/utils/request'
export default {
  name: 'RegisterDialog',
  props: {
    isshow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      form: {
        username: '',
        password: '',
        repassword: '',
        resource: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        repassword: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ],
        resource: [
          { required: true, message: '请选择用户类型', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.form = {}
  },
  methods: {
    dialogClose() {
      // 重置表单
      // this.$root.$refs.loginForm.resetFields()
      // 关闭模态框
      setTimeout(() => {
        this.$emit('update:isshow', false)
      }, 200)
    },
    // 重置表单校验
    clearValidate() {
      this.$refs['ruleForm'].clearValidate()
    },
    confirm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const data = {
            username: this.form.username,
            password: this.form.password
          }
          // console.log(data)
          // console.log(this.form)
          if (this.form.resource === '0') {
            post('/user/register', data).then(res => {
              if (res.status === 200) {
                this.$emit('update:isshow', false)
                this.$message({
                  message: res.message,
                  type: 'success'
                })
              } else {
                this.$message.error(res.message)
              }
            })
            // console.log(res)
          }
          if (this.form.resource === '1') {
            post('/user/registerEmployee', data).then(res => {
              if (res.status === 200) {
                this.$emit('update:isshow', false)
                this.$message({
                  message: res.message,
                  type: 'success'
                })
              } else {
                this.$message.error(res.message)
              }
            })
            // console.log(res)
          }
          // this.$emit('update:isshow', false)
        } else {
          console.log('error submit!!')
          return false
        }
      })
      // console.log("确认");
      // this.$emit('getform')
    },
    cancel() {
      this.form = {}
      this.clearValidate()
      this.$emit('update:isshow', false)
      this.$emit('cancelfrom')
      console.log('取消')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 3rem;
}
::v-deep .el-input__inner {
  height: 50px;
}
</style>
